<template>
   <div class="home-dec">

        <!--头部导航栏 -->
      <van-nav-bar
        title="趣味生活"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
        fixed 
       />   

          <!-- 详细介绍的图片 -->
       <div class="text-dec">
           <img :src="images[index]" alt="">    
       </div>

       <!-- 点评部分 -->
       <div class="comment">
       <span>点评</span>
       <van-rate v-model="value" />
    </div>

    <van-divider :style="{borderColor: 'black'}" v-show="show">评论成功</van-divider>
    
<!-- 底部反馈部分 -->
  <div class="report">
  <p v-show="show"><van-icon name="https://b.yzcdn.cn/vant/icon-demo-1126.png" size="30"/>  <span>{{message}}</span></p> 

    <!-- 底部弹出 -->
  <van-popup v-model="isReportshow" 
     round
     position="bottom" 
     :style="{ height: '40%' }">
     
 
     <van-field
        v-model="message"
        rows="2"
        autosize
        label="评论"
        type="textarea"
        maxlength="50"
        placeholder="请输入评论"
        show-word-limit
     />
    <div class="qr-btn" @click="report">
         确认
    </div>  

  </van-popup>
 <div class="report-conter"  v-show="search">
 <span @click="isReportshow = true">评论</span>
</div>

</div>


   </div>
</template>


<script>


import { Toast } from 'vant';
/*
如果直接在模板上通过src="../../assets/img/p1.png"是没有问题的
想通过data里的引入路径 ，再：src绑定就不能直接把"../../assets/img/p1.png"放到data中，否则webpack打包无法解析
需要通过import引入再放到data中
*/ 
import  p1 from "../../assets/img/d1.jpg"
import  p2 from "../../assets/img/d2.jpg"
import  p3 from "../../assets/img/d3.jpg"
import  p4 from "../../assets/img/d4.jpg"
import  p5 from "../../assets/img/d5.jpg"
import  p6 from "../../assets/img/d6.jpg"



    export default {
        data(){
           return {
           
               // 路由参过来的参数
               index: this.$route.params.num,
               images: [
                 p1,
                 p2,
                 p3,
                 p4,
                 p5,
                 p6,

               ],
               value: 1,
               show: false,
               search:true,
               // 底部弹出
               isReportshow:false,
               message: ''
            }

         },

        methods:{
       

           onClickLeft() {
               this.$router.replace('/')
               Toast('返回');

             
            },
           
            report() {
               if(this.message== '') {
                 Toast('不能发表空评论');
                  return
               }
               this.isReportshow = false
               this.show = true
            }


       
        },

        components: {
       
      }
    } 



</script>


<style lang="scss" scoped>

       .home-dec {
           position: absolute;
            top:0;
            width: 100%;
            height: 500vh;
            background: white;
            z-index: 999;
           
           

            .text-dec {
               width: 100%;
               height: 480px;
               padding: 5px;
               margin-top: 46px;
               background: white;
              
            }

            .report {
               p {
                 display: flex;
                 align-items: flex-end;
                 height: 50px;
                 padding-left: 10px;
                 line-height: 50px;
               

                  span {
                   height: 30px;
                   line-height: 30px;
                   margin-left: 10px;
                 
                  }

               }

               .report-conter {
                 display: flex;
                 position: fixed;
                 height: 90px;
                 margin-top: 30px;
                 // border:1px solid black;
                 #report-text {
                    
                 }

                 span {
                   display: inline-block;
                   width: 100vw;
                   height: 50px;
                   border-radius: 10px;
                   text-align:center;
                   line-height: 50px;
                   background:#eee;
                   margin-top: 38px;

                 }
               }

               .qr-btn {
                  position: absolute;
                   width: 100%;
                   height: 50px;
                   text-align: center;
                   line-height: 50px;
                   left: 0;
                   right: 0;
                   bottom: 0;
                   border-radius: 20px;
                   background: #eee;
               }
            }
         
       }
</style>